<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/pharmacy/bootstrap/header/bootstrap.min.css">
<%--    <link rel="stylesheet" href="/pharmacy/css/css_whir.css">--%>
    <script src="/pharmacy/bootstrap/header/jquery-3.4.1.js"></script>
    <script src="/pharmacy/bootstrap/header/bootstrap.min.js"></script>
    <style>

        .jrtg{ clear:both; overflow:hidden; margin-top:20px;}
        .jrtgC{ clear:both; overflow:hidden; margin-top:20px;}
        .jrtgC li{ background:url(../../images/bg_pic.jpg) no-repeat; width:370px; height:200px; padding:15px 12px 10px; float:left; margin:0 10px 20px; }
        .jrtgC li .pic{ width:200px; float:left;}
        .jrtgC li .picjj{ width:145px; float:right;color:#5C5C5C;}
        .jrtgC li .picjj p{ text-indent:0; border-bottom:1px solid #D4D4D4; padding-bottom:5px; line-height:20px; _padding-bottom:0px; }
        .picjj h1{font-family:"微软雅黑"; font-size:18px; color:#D30003; margin-top:5px; _margin-top:0px;}
        .picjj em{ color: #C10000; display:block;font-family: Arial; font-size: 18px;font-weight: bold;margin: 15px 0 0;}
        .picjj  a{ display:block; float:right;}



   li a{
       float: left;width: 16%;font-weight: bold;font-size: 14px;color: #FFFFFF
   }





    </style>
</head>
<body>
<jsp:include page="header.jsp"/>
<div class="container">



<div class="top-logo" style="display: inline-block">
    <img src="https://image.360kad.com/group2/M00/9B/FF/CgAgFVviryCAErgRAABrkiEX-ts677.gif" style="margin-left: 200px;margin-top: 30px">
</div>


<!-- 搜索-->
<div class="header_search" id="txtSearch" style="display: inline-block">


    <input type="text" id="search" name="search" style="width: 400px; border:2px solid #0a75e7;height: 40px" placeholder="请输入搜索内容">

    <button type="button" class="btn btn-primary"   style="margin-left: -4px; height: 40px;" onclick="search()">搜索</button>
</div>

    <!-- 导航条-->
    <nav class="navbar" role="navigation" >
     <div style="background:#036BC9;height: 36px;line-height: 36px ">
      <ul style="list-style: none;width: 100%">
          <li ><a href="">首页</a></li>
          <li ><a href="/pharmacy/goodlist/selectall">药品商城</a></li>
          <li ><a href="/pharmacy/groupbuy/groupgoods">团购</a></li>
          <li ><a href="/pharmacy/showSeckillGoods">特价秒杀</a></li>
          <li ><a href="/pharmacy/collect/favorite">我的收藏</a></li>
          <li ><a href="/pharmacy/epidemic">实时疫情</a></li>
      </ul>
     </div>
    </nav>

    <!-- 轮播-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000" style="margin-top: -22px">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="https://image.360kad.com/group1/M00/00/28/CgAgD17wfM-AfFTzAAIfLtk8Ato945.jpg" alt="..."style="width: 100%;height: 400px;">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="https://image.360kad.com/group2/M00/01/72/CgAgFV7sDE-AQSulAAILInleZww975.jpg" alt="..."style="width: 100%;height: 400px;">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="https://image.360kad.com/group2/M00/01/74/CgAgFV7sFHKAO8swAAL-XR2oeeU449.jpg" alt="..." style="width: 100%;height: 400px;">
                <div class="carousel-caption">
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

<!--商品主体-->
<div class="mainBody">
    <!--超值秒杀-->
    <div class="hotProm">
        <h3 style="display: inline-block">
            超值秒杀
        </h3>
        <img src="/pharmacy/images/时间.png" alt="" style="width: 20px;display: inline-block;margin-top: -10px;margin-left: 5px">
        <!--倒计时-->
        <div class="se-kl" style="display: inline-block">
            <div class="se-info" style="font-family:微软雅黑;font-weight: bold;margin-left: 10px">距离结束还剩</div>
            <div class="se-count" style="display: inline-block">
                <div class="se-day" style="display: inline-block"></div>
                <div class="se-hour" style="display: inline-block;font-family:微软雅黑;font-weight: bold;margin-left: 10px;color: red"><span class="se-txt">03</span><span style="font-family:微软雅黑;font-weight: bold;color: red;margin-left: 5px">天</span></div>
                <div class="se-min"style="display: inline-block;font-family:微软雅黑;font-weight: bold;margin-left: 10px;color: red"><span class="se-txt">26</span><span style="font-family:微软雅黑;font-weight: bold;color: red;margin-left: 5px">时</span></div>
                <div class="se-sec"style="display: inline-block;font-family:微软雅黑;font-weight: bold;margin-left: 10px;color: red"><span class="se-txt">00</span><span style="font-family:微软雅黑;font-weight: bold;color: red;margin-left: 5px">秒</span></div>

                <div style="margin-left: 750px;display: inline-block;"><a href="http://localhost:8888/pharmacy/showSeckillGoods" style="text-decoration:none;color: #666666">更多秒杀商品</a></div>
            </div>
        </div>



        <!--秒杀商品-->
        <div class="seckillGoods">
         <c:forEach var="goods" begin="0" end="8" items="${seckillGoodsVOList}">
                     <div class="col-md-3" style="border: 1px solid  #e6e6e6;width: 25%;height: 400px">
                         <a href="http://localhost:8888/pharmacy/selectSeckillGoodsById?goodId=${goods.goodId}">
                             <img src="/pharmacy/${goods.goodImages}" alt="" style="width: 100%;margin-top: 10px">
                             <p style="margin-top: 10px;color: #666; font-size: 16px">${goods.goodName}</p>
                         </a>
                         <p style="color: #ff4b47;font-size: 14px;display: inline-block;margin-top: -5px">￥${goods.seckillPrice}</p>
                         <p style="margin-top: 10px;color: #666; font-size: 14px ;display: inline-block;margin-left: 120px">销量：${goods.seckillNum}</p>
                         <a href="http://localhost:8888/pharmacy/selectSeckillGoodsById?goodId=${goods.goodId}"><img src="/pharmacy/images/buybtn2.jpg" alt=""></a>
                     </div>
         </c:forEach>
        </div>





        <!--1F热销商品-->
        <img src="/pharmacy/images/title01.jpg" alt="" style="margin-top: 30px;width: 100%">
        <c:forEach var="goods" begin="0" end="3" items="${goodsList1}">
        <div class="col-md-3" style="border:1px solid #DCDCDC; border-top:none; border-left:none;width:24%; height:260px;margin-left: 5px">
            <a href="http://localhost:8888/pharmacy/good/detail?id=${goods.id}">
                <img src="/pharmacy/${goods.goodImages}" alt="" style="width: 100%;margin-top: 10px;width: 140px;height: 150px">
                <p style="margin-top: 10px;color: #666; font-size: 16px">${goods.goodName}</p>
            </a>
            <div style="margin-top: -18px">
                <p style="color: #ff4b47;font-size: 14px;display: inline-block;margin-top: -5px">￥${goods.goodPrice}</p>
                <p style="margin-top: 10px;color: #666; font-size: 14px ;display: inline-block;margin-left: 110px">销量：${goods.saleNum}</p>
                <a href="http://localhost:8888/pharmacy/good/detail?id=${goods.id}"><img src="/pharmacy/images/buybtn1.jpg" alt=""></a>
            </div>
        </div>
       </c:forEach>

        <!--2F团购商品-->
        <img src="/pharmacy/images/title02.jpg" alt="" style="margin-top: 50px;width: 100%">
        <div class="jrtgC">

            <c:forEach var="group" begin="0" end="3" items="${groupGoodsVOList}">
            <div class="col-md-6">
                <ul>
                    <li style="list-style: none">
                        <div class="pic"><a href="http://localhost:8888/pharmacy/good/detail?id=${group.id}"><img src="/pharmacy/${group.goodImages}" width="200" height="190"></a></div>
                        <div class="picjj">
                            <h1>性价比之王</h1>
                            <p>${group.goodName}</p>
                            <span>${group.goodDetail}</span> <em> ￥${group.groupPrice}</em> <del>￥${group.goodPrice}</del><br>
                            <a href="http://localhost:8888/pharmacy/groupbuy/groupgoods"><img src="/pharmacy/images/buybtn3.jpg"></a> </div>
                    </li>
                </ul>
            </div>
            </c:forEach>




            <!--医疗器械-->
            <img src="/pharmacy/images/title06.jpg" alt="" style="margin-top: 50px">
            <div class="Equipment">
                <c:forEach var="goods" begin="6" end="9" items="${goodsList1}">
                    <div class="col-md-3" style="border: 1px solid  #e6e6e6;width: 25%;height: 400px">
                        <a href="http://localhost:8888/pharmacy/good/detail?id=${goods.id}">
                            <img src="/pharmacy/${goods.goodImages}" alt="" style="width: 100%;margin-top: 10px">
                            <p style="margin-top: 10px;color: #666; font-size: 16px">${goods.goodName}</p>
                        </a>
                        <p style="color: #ff4b47;font-size: 14px;display: inline-block;margin-top: -5px">￥${goods.goodPrice}</p>
                        <p style="margin-top: 10px;color: #666; font-size: 14px ;display: inline-block;margin-left: 120px">销量：${goods.saleNum}</p>
                        <a href="http://localhost:8888/pharmacy/good/detail?id=${goods.id}"><img src="/pharmacy/images/buybtn2.jpg" alt=""></a>
                    </div>
                </c:forEach>




<%--                <!--尾部-->--%>

<%--                <div class="footer" style="width:100%;background:#1a82ee;clear:both;">--%>
<%--                    <div class="item01" style="width:100%;border-bottom: 1px solid #147ce8;">--%>
<%--                        <div class="width1200">--%>
<%--                            <dl>--%>
<%--                                <dd>--%>
<%--                                    <img src="http://res.360kad.com/theme/default/img/product/2016new/zheng1.png">--%>
<%--                                    <div class="medicineWorld">--%>
<%--                                        <p class="t">正品保障</p>--%>
<%--                                        <p>国家认证 正规合法</p>--%>
<%--                                    </div>--%>
<%--                                </dd>--%>
<%--                                <dd>--%>
<%--                                    <!-- <a href="javascript:void(0);"></a> -->--%>
<%--                                    <img src="http://res.360kad.com/theme/default/img/product/2016new/zheng2.png">--%>
<%--                                    <div class="medicineWorld">--%>
<%--                                        <p class="t">专业药师</p>--%>
<%--                                        <p>用药全程指导 </p>--%>
<%--                                    </div>--%>
<%--                                </dd>--%>
<%--                                <dd>--%>
<%--                                    <!-- <a href="javascript:void(0);"> </a> -->--%>
<%--                                    <img src="http://res.360kad.com/theme/default/img/product/2016new/sou.png">--%>
<%--                                    <div class="medicineWorld">--%>
<%--                                        <p class="t">厂家授权 </p>--%>
<%--                                        <p>厂家授权 正品渠道</p>--%>
<%--                                    </div>--%>
<%--                                </dd>--%>
<%--                                <dd>--%>
<%--                                    <!-- <a href="javascript:void(0);"></a> -->--%>
<%--                                    <img src="http://res.360kad.com/theme/default/img/product/2016new/zheng5.png">--%>
<%--                                    <div class="medicineWorld">--%>
<%--                                        <p class="t">货到付款</p>--%>
<%--                                        <p>货到付款 购药无忧</p>--%>
<%--                                    </div>--%>
<%--                                </dd>--%>

<%--                                <dd>--%>
<%--                                    <!-- <a href="javascript:void(0);"></a> -->--%>
<%--                                    <img src="http://res.360kad.com/theme/default/img/product/2016new/zheng4.png">--%>
<%--                                    <div class="medicineWorld">--%>
<%--                                        <p class="t">隐私配送</p>--%>
<%--                                        <p>安全放心 隐私配送</p>--%>
<%--                                    </div>--%>
<%--                                </dd>--%>
<%--                                <dd style="padding-right:0;">--%>
<%--                                    <!-- <a href="javascript:void(0);"></a> -->--%>
<%--                                    <img src="http://res.360kad.com/theme/default/img/product/2016new/zheng3.png">--%>
<%--                                    <div class="medicineWorld">--%>
<%--                                        <p class="t"> 满79元包邮</p>--%>
<%--                                        <p> 全场满79元包邮</p>--%>
<%--                                    </div>--%>
<%--                                </dd>--%>
<%--                                <div class="clear"></div>--%>
<%--                            </dl>--%>
<%--                        </div>--%>

<%--                    </div>--%>
<%--                </div>--%>




            </div>












        </div>





    </div>
</div>

</div>
<script src="/pharmacy/bootstrap/header/jquery-3.4.1.js"></script>
<script>
    function search() {
        var value =document.getElementById("search").value;

        var paramters=value;

        window.location.href="/pharmacy/goodlist/selectall?goodName=" + paramters

        // alert(paramters)

        // $.ajax({
        //     url:"http://localhost:8888/pharmacy/home/search",
        //     type:"post",
        //     data:{goodName:paramters},
        //     datatype:"json",
        //     success:function (data) {
        //         console.log(data)
        //
        //         var jsonData = JSON.stringify
        //         alert(jsonData)
        //         alert(jsonData.goodName)
        //     }
        // })
    }
</script>


<script src="/pharmacy/bootstrap/header/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var oDate = new Date();
        var nowTime = oDate.getTime(); //现在的毫秒数
        oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
        var targetDate = new Date(oDate.toLocaleDateString());
        run(targetDate);
    });

    function run(enddate) {
        getDate(enddate);
        setInterval("getDate('" + enddate + "')", 500);
    }

    function getDate(enddate) {
        var oDate = new Date(); //获取日期对象

        var nowTime = oDate.getTime(); //现在的毫秒数
        var enddate = new Date(enddate);
        var targetTime = enddate.getTime(); // 截止时间的毫秒数
        var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

        var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400; //余数代表剩下的秒数；
        var hour = Math.floor(second / 3600); //整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        var minute = Math.floor(second / 60);
        second %= 60;
        var spanH = $('.se-txt')[0];
        var spanM = $('.se-txt')[1];
        var spanS = $('.se-txt')[2];

        spanH.innerHTML = tow(hour);
        spanM.innerHTML = tow(minute);
        spanS.innerHTML = tow(second);
    }

    function tow(n) {
        return n >= 0 && n < 10 ? '0' + n : '' + n;
    }
</script>

</body>
</html>